<template>
    <div class="home-1">
        <!-- 列表组件 -->
      <el-table class="eltab"
        :data="users"
        style="width: 100%">
        <el-table-column label="用户id"  width="auto"  height='35px'>
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.uid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" width="auto">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.gender }}</span>
          </template>
        </el-table-column>
       <el-table-column label="地址" width="auto">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.addr }}</span>
          </template>
        </el-table-column>
     <el-table-column label="生日" width="auto">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.birthday }}</span>
          </template>
        </el-table-column>
     <el-table-column label="昵称" width="auto">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.nickName }}</span>
          </template>
        </el-table-column>
     <el-table-column label="密码" width="auto">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.password }}</span>
          </template>
        </el-table-column>
      </el-table>
    <!-- 分页组件 -->
     <el-pagination
      background
       @current-change="handleCurrentChange"
       :current-page="page"
        :page-size='limit'
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
    <h3>总人数：{{this.total}}</h3>
    </div>
    </template>
    
    <script>
    import {http} from '../../../../uitl/request'
    //import tanchu from './home-1-2.vue'
    export default {
        created(){
            this.getusers()
        },
        data(){
            return{
                page:1,
                limit:15,//一页有多少条数据
                users:[],
                isshow:false,
                adduser:{addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''},
                shu:[],
                isxg:false,
                xguser:{addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''},
                total: ''
            }
        },
        methods:{
             //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
            //  console.log(`当前页: ${val}`);
                this.page = val;
                this.getusers()
                // console.log(this.page);
            },
            async getusers(){
            try{
                const {data:res}=await http.get(`/meeting/userList/${this.page}/${this.limit}/${this.$route.query.mid}`)
                if(res.data.length!==0){
                    // console.log(res.data)
                    this.users=res.data.list
                    this.total = res.data.total
                }
                // console.log(this.users);
                }catch(err){
                    Promise.reject(err)
                }
            },
        },
        components:{
    //tanchu
        }
    }
    </script>
    
    <style scoped>
    .home-1{
        margin: 2px 0px 0px 5px;
    }
    .eltab{
        line-height: 30px !important;
    }
    .el-table /deep/ th {
    padding: 0 ;
    }
    .el-table /deep/ td {
    padding: 0 ;
    }
    .home1btn{
        float: left;
        margin-bottom: 3px;
    }
    .from{
    float: left;
    width: 100%;
    margin-left: 5px;
    line-height: 30px !important;
    border: 1px solid red;
    }
    .from el-form-item{
        float: left;
    }

    h3 {
        float: left;
        height: 30px;
    }
    </style>